<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Edit } from '@nutui/icons-vue-taro';

const list = ref<string[]>([
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
]);

onMounted(() => {});
</script>

<template>
  <basic-layout show-tab-bar>
    <custom-nav-bar title="礼上来往" />
    <div class="w-375px text-30px text-primary">
      <!--轮播图-->
      <nut-swiper
        :init-page="0"
        :pagination-visible="true"
        pagination-color="#F44336"
        auto-play="3000"
        :height="150"
        class="w-90% mt-12px ma b-rd-18px"
      >
        <nut-swiper-item v-for="item in list" :key="item">
          <img :src="item" alt="" />
        </nut-swiper-item>
      </nut-swiper>
      <nut-cell-group style="margin: 20px auto">
        <nut-cell style="background-color: #ebeef5">
          <template #icon>
            <i class="i-local-count" style="width: 40px; height: 40px" />
          </template>
          <template #title>
            <nut-space direction="vertical" fill :gutter="5">
              <span class="color-#666 pl-10px text-14px">本月送礼统计</span>
              <span class="text-10px pl-10px">本月共送礼5000元</span>
            </nut-space>
          </template>
        </nut-cell>
      </nut-cell-group>
      <nut-cell-group desc="最近送礼记录" class="record-group">
        <nut-cell v-for="index in 10" :key="index" class="record-cell" center size="large">
          <template #icon>
            <nut-avatar shape="square" color="#666">礼</nut-avatar>
          </template>
          <template #title>
            <nut-space direction="vertical" fill :gutter="5">
              <span class="font-bold color-#666 pl-10px text-14px">伍六七家</span>
              <span class="text-10px pl-10px">2024-05-22</span>
            </nut-space>
          </template>
          <template #desc>
            <span class="h-28px flex-center float-right text-20px color-#666 font-bold mr-8px">500</span>
          </template>
        </nut-cell>
      </nut-cell-group>
    </div>
  </basic-layout>
</template>

<style lang="scss">
.nut-swiper-item {
  line-height: 150px;
  img {
    width: 100%;
    height: 100%;
  }
}
.record-group {
  box-shadow: none;

  .nut-cell-group__wrap {
    box-shadow: none;
  }

  .record-cell {
    background-color: #fafafa;
    box-shadow: none;
  }
}
</style>
